<template>
  <div class="page-container">
    <!--工具栏-->
    <div style="margin-top: 20px">
      <el-form :inline="true"  label-width="120px" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row>
          <el-form-item label="注册时间：" prop="registrationStartTime">
            <el-date-picker
              v-model="filters.registrationStartTime"
              type="date"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            ></el-date-picker>
          </el-form-item>
          <span>-</span>
          <el-form-item prop="registrationEndTime">
            <el-date-picker
              v-model="filters.registrationEndTime"
              type="date"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="最后登录时间：" prop="logStartTime">
            <el-date-picker
              v-model="filters.logStartTime"
              type="date"
              placeholder="开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            ></el-date-picker>
          </el-form-item>
          <span>-</span>
          <el-form-item prop="logEndTime">
            <el-date-picker
              v-model="filters.logEndTime"
              type="date"
              placeholder="结束时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="integralBegin" label="积分区间：">
            <el-input
              v-model.trim="filters.integralBegin"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="5"
              auto-complete="off"
              placeholder="输入数字"
              clearable
            ></el-input>
          </el-form-item>
          <span>-</span>
          <el-form-item prop="integralEnd">
            <el-input
              v-model.trim="filters.integralEnd"
              auto-complete="off"
              oninput="value=value.replace(/[^\d]/g,'')"
              maxlength="5"
              min="0"
              placeholder="输入数字"
              clearable
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="最后登录平台：">
              <el-select v-model="filters.lastLogChild" placeholder="全部" :popper-append-to-body="false">
                <el-option
                  v-for="item in childOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户来源：">
              <el-select v-model="filters.userSource" placeholder="全部" :popper-append-to-body="false">
                <el-option
                  v-for="item in childOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态：">
              <el-select v-model="filters.status" placeholder="全部" :popper-append-to-body="false">
                <el-option label="正常" value="1"></el-option>
                <el-option label="黑名单" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态所属平台：">
              <el-select v-model="filters.childId" placeholder="全部" :popper-append-to-body="false">
                <el-option
                  v-for="item in childOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户帐号：">
              <el-input v-model="filters.userAccount" placeholder="请输入用户帐号" maxlength="80" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户昵称：">
              <el-input v-model="filters.nickName" placeholder="请输入用户昵称" maxlength="80" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户手机号：">
              <el-input v-model="filters.phone" placeholder="请输入用户手机号" maxlength="11" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否实名认证：">
              <el-select v-model="filters.isAuthentication" placeholder="全部" :popper-append-to-body="false">
                <el-option label="是" value="1"></el-option>
                <el-option label="未实名" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签名称：" prop="labelName">
              <el-select
                v-model="filters.labelName"
                filterable
                multiple
                reserve-keyword
                placeholder="全部"
                @change="selectModel($event)"
                clearable
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in labelOptions"
                  :key="item.id"
                  :label="item.labelName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: right">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')"  :size="size"/>
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              :label="'搜索'"
              class="searchButton"
              @click="findPage(null)"
            />
          </el-form-item>
          <!-- <el-form-item>
          </el-form-item> -->
        </el-row>
      </el-form>
    </div>

    <div class="toolbar t_r">
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>

    <div style="width:100%">
      <!--表格-->
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ 'color': '#FFF','background-color': '#409EFF','text-align': 'center'}"
        :max-height="15000"
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="160" element-loading-text>
          <template slot-scope="scope">
            <span>{{ scope.row.userNumber}}</span>
          </template>
        </el-table-column>

        <el-table-column width="185px" align="center" label="用户账号">
          <template slot-scope="scope">
            <span>{{ scope.row.userAccount || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="昵称">
          <template slot-scope="scope">
            <span>{{ scope.row.nickName || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="会员积分">
          <template slot-scope="scope">
            <span>{{ scope.row.integral}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="用户来源">
          <template slot-scope="scope">
            <span>{{ scope.row.userSource || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="是否实名认证">
          <template slot-scope="scope">
            <span v-if="scope.row.isAuthentication == 1">是</span>
            <span v-if="scope.row.isAuthentication == 2">否</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="注册时间">
          <template slot-scope="scope">
            <span>{{ scope.row.registrationTime || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="185px" align="center" label="最后登录时间">
          <el-table-column width="185px" align="center" :label="item" v-for="(item,index) in headOptions" :key="index">
            <template slot-scope="scope">
              <span v-for="(items,index) in scope.row.loginList[index]" :key="index">{{items}}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column class-name="status-col" align="center" label="状态" width="190">
          <el-table-column width="185px" align="center" :label="item" v-for="(item,index) in headOptions" :key="index">
            <template slot-scope="scope">
                    <span v-for="(items,index) in scope.row.statusList[index]" :key="index">
                      <span v-if="items == 0">黑名单</span>
                      <span v-if="items == 1">正常</span>
                    </span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column prop="tag" label="标签" width="330" fit class="tags" style="overflow:visiable">
          <template slot-scope="scope">
            <div v-show="null !=scope.row.labelList" v-for="item in scope.row.labelList" :key="item.index" class="turnInlineBlock ml15 mr15 mb10 mt10">{{item}}</div>
            <span v-show="null ==scope.row.labelList">-</span>
          </template>
        </el-table-column>
        <el-table-column  fixed="right" label="操作" width="200px">
          <template slot-scope="scope">
            <kt-button
              @click="handleDetail(scope.row)" type="text"  label="查看">
            </kt-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏v-if="scope.row.status == 1"-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          :current-page="filters.start"
          :page-size="filters.limit"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import CyTable from '@/views/Core/JicTable'
  import KtButton from '@/views/Core/KtButton'
  import {format} from '@/utils/datetime'
  import TableColumnFilterDialog from '@/views/Core/TableColumnFilterDialog'

  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },

    data() {
      var checkStartTime = (rule, value, callback) => {
        if (value == null || typeof value == 'undefined') {
          callback()
        }
        if (
          this.filters.registrationEndTime == null ||
          typeof this.filters.registrationEndTime == 'undefined'
        ) {
          callback()
        }
        if (
          new Date(value).getTime() > new Date(this.filters.registrationEndTime).getTime()
        ) {
          callback(new Error('开始时间不能大于结束时间'))
        }
        this.$refs.filters.clearValidate('registrationEndTime')
        callback()
      }
      var checkEndTime = (rule, value, callback) => {
        if (value == null || typeof value == 'undefined') {
          callback()
        }
        if (
          this.filters.registrationStartTime == null ||
          typeof this.filters.registrationStartTime == 'undefined'
        ) {
          callback()
        }
        if (
          new Date(value).getTime() < new Date(this.filters.registrationStartTime).getTime()
        ) {
          callback(new Error('结束时间不能小于开始时间'))
        }
        this.$refs.filters.clearValidate('registrationStartTime')
        callback()
      }
      var checkLogStartTime = (rule, value, callback) => {
        if (value == null || typeof value == 'undefined') {
          callback()
        }
        if (
          this.filters.logEndTime == null ||
          typeof this.filters.logEndTime == 'undefined'
        ) {
          callback()
        }
        if (
          new Date(value).getTime() > new Date(this.filters.logEndTime).getTime()
        ) {
          callback(new Error('开始时间不能大于结束时间'))
        }
        this.$refs.filters.clearValidate('logEndTime')
        callback()
      }
      var checkLogEndTime = (rule, value, callback) => {
        if (value == null || typeof value == 'undefined') {
          callback()
        }
        if (
          this.filters.logStartTime == null ||
          typeof this.filters.logStartTime == 'undefined'
        ) {
          callback()
        }
        if (
          new Date(value).getTime() < new Date(this.filters.logStartTime).getTime()
        ) {
          callback(new Error('结束时间不能小于开始时间'))
        }
        this.$refs.filters.clearValidate('logStartTime')
        callback()
      }
      return {
	      loading: false,
        haveLabelNums: null,
        deleteIds: [],
        filtersRules: {
          registrationStartTime: [{validator: checkStartTime, trigger: 'change'}],
          registrationEndTime: [{validator: checkEndTime, trigger: 'change'}],
          logStartTime: [{validator: checkLogStartTime, trigger: 'change'}],
          logEndTime: [{validator: checkLogEndTime, trigger: 'change'}]
        },
        deletetableDataTotal: 0,
        deleteDialogVisible: false,
        deletetableData: [],
        loginList: [],
        totalSize: 0,
        labelForm: {
          start: 1,
          limit: 10,
          memberId: null
        },
        memberLabelForm: {
          start: 1,
          limit: 10,
          memberId: null,
          deleteFlag: 0
        },
        multipleSelection: [],
        headOptions: [],
        childOptions: [],
        tableList: [],
        labelSelection: [],
        tabelDataTotal: 0,
        tableData: [],
        integralBegin: null,
        integralEnd: null,
        isBlacklist: null,
        businessId: null,
        deptMsg: localStorage.getItem('user'),//当前登录组织信息
        userId: localStorage.getItem('userId'), //当前登录用户id
        deptType: localStorage.getItem('deptType'), //当前登录用户所属组织类型
        id: null,
        userNumber: null,
        userAccount: null,
        nickName: null,
        phone: null,
        integral: null,
        userSource: null,
        registrationTime: null,
        lastLogTime: null,
        status: null,
        logStartTime: null,
        logEndTime: null,
        registrationStartTime: null,
        registrationEndTime: null,
        isAuthentication: null,
        size: 'mini',
        editForm: {
          isBlacklist: null,
          id: null,
          integral: null,
          rmb: null,
          dailyCeiling: null,
          maxGrowthValue: null,
          startTime: null,
          endTime: null,
          status: null,
          deleteFlag: null
        },
        filters: {
          start: 1,
          limit: 10,
          labelName: [],
          isAuthentication: null,
          phone: null,
          nickName: null,
          userAccount: null,
          childId: null,
          status: null,
          integralEnd: null,
          integralBegin: null,
          userSource: null,
          logStartTime: null,
          logEndTime: null,
          registrationEndTime: null,
          registrationStartTime: null,
          userGroupId: null,        // 得到用户组id
        },
        columns: [
          {prop: 'userNumber', label: '序号', minWidth: 130},
          {prop: 'userAccount', label: '用户账号', minWidth: 120},
          {prop: 'nickName', label: '昵称', minWidth: 120},
          {prop: 'phone', label: '手机号', minWidth: 120},
          {prop: 'integral', label: '会员积分', minWidth: 120},
          {
            prop: 'userSource',
            label: '用户来源',
            minWidth: 120
          },
          {
            prop: 'isAuthentication',
            label: '是否实名认证',
            minWidth: 120,
            formatter: this.userisAuthenticationFormatter
          },
          {prop: 'registrationTime', label: '注册时间', minWidth: 120},
          {prop: 'lastLogTime', label: '最后登录时间', minWidth: 120},
          // {prop: "status", label: "状态	", minWidth: 90,formatter: this.statusFormatter},
          {
            prop: 'isBlacklist',
            label: '状态	',
            minWidth: 90,
            formatter: this.isBlacklistFormatter
          }
        ],
        labelOptions: [],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        printPage: false,
        operation: false, // true:新增, false:编辑
        editLoading: false,

        // 新增编辑界面数据
        dataForm: {
          deptType: localStorage.getItem('deptType'), //当前登录用户所属组织类型
          id: null,
          childOptions: [],
          headImage: null,
          isAuthentication: null,
          birth: null,
          wxAccount: null,
          wxName: null,
          wxImage: null,
          userNumber: null,
          userAccount: null,
          nickName: null,
          phone: null,
          isBlacklist: null,
          integral: null,
          userSource: null,
          registrationTime: null,
          lastLogTime: null,
          status: null,
          logStartTime: null,
          logEndTime: null,
          registrationStartTime: null,
          registrationEndTime: null
        },
        // 获取分页数据
        checked: []
      }
    },

    methods: {
      selectModel(id) {
        let obj = {}
        obj = this.labelOptions.find(item => {
          //model就是上面的数据源
          if (item.id === id) {
            this.filters.labelName = item.labelName
          }
        })
      },
      selectBlur(e) {
        this.filters.labelName = e.target.value
      },
      //查询后台标签信息
      remoteMethod: function (query) {
        if (query !== '') {
          var this_ = this
          var search = {}
          search.labelName = query
          this.utils.request.queryLableList(search, function (res) {
            this_.labelOptions = res.data
          })
        } else {
          this.labelOptions = []
        }
      },
      //复选框选中
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      selecteChange(rows) {
        if (rows) {

          this.$refs.multipleTable.toggleRowSelection(rows)

        } else {
          this.$refs.multipleTable.clearSelection()
        }
        // this.labelSelection=val;
      },
      //批量设置标签
      batchSetLabelParams() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            message: '批量设置标签时至少选择一条数据',
            type: 'error'
          })
          return
        }
        let this_ = this
        this.editDialogVisible = true

        //查询标签信息
        this.utils.request.findMemMemberCustomLabelPage(this.labelForm, function (res) {
          if (res.code == '0000') {
            this_.tableData = res.data.rows
            this_.tabelDataTotal = res.data.total
            this_.labelForm.memberId = data.id
          }
        })
      },
      filterTag(value, row) {
        return row.tag === value
      },
      // 获取分页数据
      findPage: function (data) {
        this.filters.userGroupId = this.$route.params.userGroupId
        this.loading = true;
        let this_ = this
        this.utils.request.queryUserGroupAllUser(this_.filters, function (res) {
          if (res.code == '0000') {
            this_.tableList = res.data.rows
            this_.totalSize = res.data.total
            this_.queryUserHeadInfo()
          }
          this_.$nextTick(() => {
            this_.loading = false;
          })
        })
      },

      // 换页刷新
      currentChange(pageNum) {
        this.filters.start = pageNum
        this.SetLabelParams()
      },
      sizeChange(pageSize) {
        this.filters.start = 1
        this.filters.limit = pageSize
        this.SetLabelParams()
      },
      labelFormFind() {
      },
      //设置标签
      SetLabelParams(data) {
        let this_ = this
        this.editDialogVisible = true
        //查询标签信息
        this.utils.request.findMemMemberCustomLabelPage(this.labelForm, function (
          res
        ) {
          if (res.code == '0000') {
            this_.tableData = res.data.rows
            this_.tabelDataTotal = res.data.total
            this_.labelForm.memberId = data.id
          }
        })
      },
      // 选择标签
      addSelectionChange(val) {
        let this_ = this
        this_.labelSelection = val
      },
      //保存标签
      addLabel() {
        let params = {}
        let this_ = this
        if (this.labelSelection.length == 0) {
          this.$message({message: '保存时至少选择一条数据', type: 'error'})
          return
        }
        let labelIds = []
        this.labelSelection.forEach(itme => {
          labelIds.push(itme.id)
        })
        let memberIds = []
        params.labelIds = labelIds
        if (this_.labelForm.memberId == null) {
          this.multipleSelection.forEach(itmes => {
            memberIds.push(itmes.id)
          })
          params.memberIds = memberIds
        } else {
          memberIds.push(this_.labelForm.memberId)
        }
        params.memberIds = memberIds
        this.utils.request.saveMememberLabelInfo(params, function (res) {
          if (res.code == '0000') {
            this_.$message({message: '操作成功', type: 'success'})
          } else {
            this_.$message({message: '操作失败, ' + res.msg, type: 'error'})
          }
        })
        //需要先判断会员标签关联表是否入库；根据会员id与标签id判断查询判断，有数据则不加1
        if (this_.multipleSelection.length > 0) {
          this_.multipleSelection.forEach(items => {
            this_.labelSelection.forEach(item => {
              //保存标签前判断是否重复
              this_.memberLabelForm.memberId = items.id
              this_.memberLabelForm.labelId = item.id
              this_.utils.request.queryMememberLabelList(this_.memberLabelForm, function (//根据会员id和标签id查询是否有值
                res
              ) {
                //重复
                if (res.data.rows.length > 0) {
                } else {//没有重复值，标记次数需要加1
                  let nums = Number(item.markTimes) + this_.multipleSelection.length
                  this_.utils.request.updateMememberCustomLabelInfo({id: item.id, timesOfMarking: nums}, function (res) {
                  })
                }
              })
            })
          })
        } else {
          this_.updataTimesOfMake()
        }
        this_.editDialogVisible = false
        this_.findPage()
      },
      updataTimesOfMake() {
        let this_ = this
        this_.labelSelection.forEach(item => {
          //保存标签前判断是否重复
          this_.memberLabelForm.memberId = this.labelForm.memberId
          this_.memberLabelForm.labelId = item.id
          this_.utils.request.queryMememberLabelList(this_.memberLabelForm, function (//根据会员id和标签id查询是否有值
            res
          ) {
            //重复
            if (res.data.rows.length > 0) {
            } else {//没有重复值，标记次数需要加1
              let nums = Number(item.markTimes) + 1
              this_.utils.request.updateMememberCustomLabelInfo({id: item.id, timesOfMarking: nums}, function (res) {
              })
            }
          })
        })
      },
      //删除标签确认
      deleteLabel() {
        for (var i = 0; i < this.deleteIds.length; i++) {
          this.utils.request.deleteMememberLabelInfo({id: this.deleteIds[i].id}, function (res) {
          })
          //删除成功还需要根据标签id对标记次数减1
          let nums = parseInt(this.deleteIds[i].markingTimes) - 1
          this.utils.request.updateMememberCustomLabelInfo({id: this.deleteIds[i].labelid, timesOfMarking: nums}, function (res) {
          })
        }
        this.deleteDialogVisible = false
        this.findPage()
      },

      //删除标签
      delLabelMember(data) {
        //已有标签数量显示
        this.haveLabelNums = this.haveLabelNums - 1
        //获取删除数据的id和下标
        this.deleteIds.push({'id': data.id, 'labelid': data.labelId, 'markingTimes': data.timesOfMaking})
        this.deletetableData.splice(this.deletetableData.indexOf(data), 1)//根据下标删除
        this.deletetableDataTotal = this.haveLabelNums
      },
      //删除标签弹框
      DelLabelParams(data) {
        this.deleteDialogVisible = true
        //查询当前用户当前平台下的标签
        this.memberLabelForm.memberId = data.id
        this.memberLabelForm.labelId = null
        this.queryMemberLable()
      },
      queryMemberLable() {
        let this_ = this
        this_.deleteIds = []
        //查询标签信息
        this.utils.request.queryMememberLabelList(this.memberLabelForm, function (res) {
          if (res.code == '0000') {
            this_.deletetableData = res.data.rows
            this_.deletetableDataTotal = res.data.total
            this_.haveLabelNums = this_.deletetableData.length
          }
        })
      },
      //获取子平台列表
      queryDeptOption() {
        let query = {}
        let this_ = this
        query.deptType = 1
        this_.utils.request.queryDeptList(query, function (res) {
          if (res.code == '0000') {
            this_.childOptions = res.data
          }
        })
      },

      //获取子平台列表
      // queryChildList() {
      //   let this_ = this;
      //   let query = {};
      //   let data = {};
      //   let callback = res => {
      //     if (res.code == "0000") {
      //       this_.businessId = res.data;
      //       query.id = Number(this_.businessId);
      //       this_.utils.request.queryChildList(query, function(res) {
      //         if (res.code == "0000") {
      //           this_.childOptions = res.data;
      //         }
      //       });
      //     }
      //   };
      //   //子平台登录
      //   if (this_.deptType == 1) {
      //     data.id = this_.userId;
      //     this_.utils.request.queryChildIdByUserId(data, callback);
      //   } else {
      //     query.id = this_.businessId;
      //     this_.utils.request.queryChildList(query, function(res) {
      //       if (res.code == "0000") {
      //         this_.childOptions = res.data;
      //       }
      //     });
      //   }
      // },
      userisAuthenticationFormatter: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return '是'
        } else if (cellValue == 2) {
          return '未认证'
        }
      },
      //用户来源解析
      userSourceFormatter: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return '自营'
        } else if (cellValue == 2) {
          return '第三方商户'
        }
      },
      //状态转化
      statusFormatter: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return '启用'
        } else if (cellValue == 0) {
          return '停用'
        }
      },

      isBlacklistFormatter: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return '正常'
        } else if (cellValue == 0) {
          return '黑名单'
        }
      },
      //获取选择框数据
      selectionChange(val) {
        this.checked = val.selections
      },
      handleClose() {
        (this.dataForm = {
          id: null,
          userNumber: null,
          userAccount: null,
          nickName: null,
          phone: null,
          integral: null,
          userSource: null,
          registrationTime: null,
          lastLogTime: null,
          status: null
        }),
          this.$refs.dataForm.resetFields()
      },
      // 详情页面
      handleDetail: function (data) {
        this.$router.push({
          path: '/UserInfo/' + data.id + '/' + data.thirdUserId + '/' + 1
        })
      },
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {
              closeOnClickModal: false
            }).then(() => {
              let params = Object.assign({}, this.dataForm)
              params.status = 2
              var this_ = this
              this.utils.request.editMerchantInfo(params, function (res) {
                if (res.code == '0000') {
                  this_.$message({message: '操作成功', type: 'success'})

                  this_.$refs['dataForm'].resetFields()

                  this_.editDialogVisible = false

                  this_.findPage(null)
                } else {
                  this_.$message({
                    message: '操作失败, ' + res.msg,
                    type: 'error'
                  })
                }
              })
            })
          }
        })
      },
      //查询表头
      queryUserHeadInfo() {
        let query = {}
        let this_ = this
        this.utils.request.queryUserHeadInfo(query, function (res) {
          if (res.code == '0000') {
            this_.headOptions = res.data
          }
        })
      },

      // handleBlacklist: function (row) {
      //   this.$confirm("确定加入黑名单吗？", "提示", {
      //     type: "warning"
      //   })
      //     .then(() => {
      //       const params = {};
      //       params.ruleId = row.row.ruleId;
      //       params.status = 1;
      //       const this_ = this;
      //       this.utils.request.meMemberIntegralRuleStopStatus(params, function (res) {
      //         if (res.code === "0000") {
      //           this_.$message({message: "操作成功", type: "success"});
      //         } else {
      //           this_.$message({message: "操作失败, " + res.msg, type: "error"});
      //         }
      //         this_.findPage();
      //       });
      //     })
      //     .catch(() => {
      //     });
      // },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      resetForm(formName) {
        //需要校验的key
        let keys = ['registrationStartTime', 'registrationEndTime', 'logStartTime', 'logEndTime', 'childId', 'userSource'
          , 'integralBegin', 'integralEnd', 'status', 'childId', 'userAccount', 'nickName'
          , 'phone', 'isAuthentication', 'labelName', 'lastLogChild']
        let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys)
        if (!boo) {
          return
        }
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields()
          this.filters = {
            start: 1,
            limit: 10,
            labelName: null,
            isAuthentication: null,
            phone: null,
            nickName: null,
            userAccount: null,
            childId: null,
            status: null,
            integralEnd: null,
            integralBegin: null,
            userSource: null,
            logStartTime: null,
            logEndTime: null,
            registrationEndTime: null,
            registrationStartTime: null,
            lastLogChild: null,
          },
            this.findPage()
        }
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = []

        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp
      }
    },

    mounted() {
      this.queryUserHeadInfo()
      this.initColumns()
      this.findPage()
      this.queryDeptOption()
      this.remoteMethod()
    }
  }
</script>

<style lang="scss" scoped>
  .font {
    font-size: 18px;
    font-weight: 800;
    margin-left: -98px;
  }

  /deep/ .color {
    background: #f56c6c;
    color: #fff;
  }

  // .mr50{
  //   margin-right: 130px !important;
  // }
  .timePicker_Long {
    /deep/ .el-input__inner {
      width: 225px !important;
    }
  }

  // /deep/ .el-table_1_column_11 .is-center {
  //   /deep/ .cell {
  //     /deep/ .el-button + .el-button {
  //       margin-left: 0 !important;
  //       margin-right: 10px !important;
  //       margin-bottom: 5px !important;
  //     }
  //   }
  // }

  // /deep/ .el-table__body td {
  //   /deep/ .cell{
  //     max-height: 100px !important;
  //   }
  // }
  .search-input {
    .times {
      .times-to {
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        color: #999;
        display: inline-block;
      }

      /deep/ .el-date-editor {
        width: 211px !important;
      }

      /deep/ .el-input__inner {
        width: 208px !important;
      }
    }
  }

  .search-input {
    .times {
      /deep/ .w78 {
        width: 78px !important;

        .el-input__inner {
          width: 78px !important;
        }
      }
    }
  }

  /deep/ .w152 {
    width: 152px !important;

    .el-input .el-input__inner {
      width: 152px !important;
    }
  }

  /deep/ .w170 {
    width: 170px !important;

    .el-input__inner {
      width: 170px !important;
    }
  }

  // .specialTable {
  //   /deep/ td {
  //     &:nth-last-child(1) {
  //       text-align: left !important;

  //       .cell {
  //         .el-button {
  //           margin-left: 0 !important;
  //         }
  //       }
  //     }
  //   }
  // }

  .lessPaddingRight {
    /deep/ .el-input__inner {
      padding-right: 10px !important;
    }
  }

  .ml15 {
    margin-left: 15px !important;
  }

  .mr15 {
    margin-right: 15px !important;
  }

  .mb10 {
    margin-bottom: 10px !important;
  }

  .mt10 {
    margin-top: 10px !important;
  }

  /deep/ .el-table__row {
    td {
      .cell {
        overflow: hidden;
        text-overflow: ellipsis;
        // display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        max-height: 86px !important;
      }
    }
  }
</style>
